<script setup lang="ts">
interface Props {
    data: any;
}

withDefaults(defineProps<Props>(), {
    data: () => ({}),
});
</script>

<template>
    <div class="px-80 py-16 space-y-10 bg-white">
        <!-- <div class="flex justify-between items-center">
            <a-breadcrumb separator=">">
                <a-breadcrumb-item>全包围脚垫</a-breadcrumb-item>
                <a-breadcrumb-item>奥迪Audi</a-breadcrumb-item>
                <a-breadcrumb-item>进口奥迪 Imported Audi</a-breadcrumb-item>
                <a-breadcrumb-item>奥迪A5Audi A5</a-breadcrumb-item>
            </a-breadcrumb>
        </div> -->
        <div class="flex flex-col justify-center items-center">
            <strong class="text-3xl">基本信息</strong>
            <small class="text-2xl text-gray-300">BASIC INFORMATION</small>
            <span class="line mt-6 relative"> </span>
        </div>
        <div class="flex justify-between">
            <div class="space-y-6">
                <span class="flex flex-col">
                    <small class="text-base">所属车系</small>
                    <small class="text-sm text-gray-600">Car series</small>
                </span>
                <span class="flex flex-col relative">
                    <b class="z-10 text-3xl">{{ data.carName }}</b>
                    <i
                        style="transform: rotate(-12deg) translateY(0.4rem)"
                        class="inline-block absolute inset-0 bg-blue-100 h-10"
                    ></i>
                </span>
            </div>
            <div class="space-y-6">
                <span class="flex flex-col">
                    <small class="text-base">车型年份</small>
                    <small class="text-base text-gray-600">Model year</small>
                </span>
                <span class="flex flex-col relative">
                    <b class="z-10 text-3xl">{{ data.carCodeYear }}年</b>
                    <i
                        style="transform: rotate(-12deg) translateY(0.4rem)"
                        class="inline-block absolute inset-0 bg-blue-100 h-10"
                    ></i>
                </span>
            </div>
            <div class="space-y-6">
                <span class="flex flex-col">
                    <small class="text-base">车型编号</small>
                    <small class="text-base text-gray-600">Model number</small>
                </span>
                <span class="flex flex-col relative">
                    <b class="z-10 text-3xl">{{ data.carCode }}</b>
                    <i
                        style="transform: rotate(-12deg) translateY(0.4rem)"
                        class="inline-block absolute inset-0 bg-blue-100 h-10"
                    ></i>
                </span>
            </div>
            <div class="space-y-6">
                <span class="flex flex-col">
                    <small class="text-base">座位数量</small>
                    <small class="text-base text-gray-600">Seat number</small>
                </span>
                <span class="flex flex-col relative">
                    <b class="z-10 text-3xl">{{ data.seatNumber }}</b>
                    <i
                        style="transform: rotate(-12deg) translateY(0.4rem)"
                        class="inline-block absolute inset-0 bg-blue-100 h-10"
                    ></i>
                </span>
            </div>
        </div>
        <a-button type="primary" danger
            >车型说明书 / Model description</a-button
        >
        <div class="flex flex-col gap-y-4 text-base">
            <span>{{ data.carDescription }}</span>
            <span>{{ data.carENDescription }}</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.line {
    width: 8rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background-color: rgba(18, 63, 255, 1);

    &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 80%;
        height: inherit;
        background-color: #ff4d4f;
        border-radius: inherit;
    }
}
</style>
